<!--
> Muaz Khan     - www.MuazKhan.com
> MIT License   - www.WebRTC-Experiment.com/licence
> Documentation - github.com/muaz-khan/getScreenId
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>getScreenId | Capture Screen on Any Domain!</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
        <meta name="author" content="Muaz Khan">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">

        <style>
            audio {
                vertical-align: bottom;
                width: 10em;
            }

            video {
                max-width: 100%;
                vertical-align: top;
            }

            input {
                border: 1px solid #d9d9d9;
                border-radius: 1px;
                font-size: 2em;
                margin: .2em;
                width: 30%;
            }

            p, .inner { padding: 1em; }

            li {
                border-bottom: 1px solid rgb(189, 189, 189);
                border-left: 1px solid rgb(189, 189, 189);
                padding: .5em;
            }

            label {
                display: inline-block;
                width: 8em;
            }

            p {
              margin-top: 0!important;
              margin-bottom: 0!important;
              padding: 10px 10px!important;
            }

            blockquote {
              margin: 10px;
              border-radius: 10px;
              background: rgb(253, 253, 253);
              padding: 8px 20px;
              font-size: 25px;
              font-weight: 200;
              line-height: 1.5;
              word-spacing: 5px;
            }

            button {
              font-size: 25px;
              font-weight: 200;
              line-height: 1.5;
              word-spacing: 5px;
            }

            section blockquote {
              color: #EC008C;
            }

            .specific-h2, h1 {
              font-size: 35px;
              font-weight: 200;
              padding: 5px 10px;
              border-bottom: 1px dotted #EC008C;
            }

            .specific-h2 a {
              color: #EC008C;
            }

            h1 {
              font-size: 40px;
              color: #EC008C;
            }
        </style>
        <script>
            document.createElement('article');
            document.createElement('footer');
        </script>

        <!-- script used to capture sourceId of the screen -->
        <script src="https://cdn.webrtc-experiment.com/getScreenId.js"> </script>
        <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    </head>

    <body>
        <article>
            <header style="text-align: center;">
                <h1>
                    getScreenId | Capture Screen on Any Domain!
                </h1>
                <p>
                    <a href="https://www.webrtc-experiment.com/">HOME</a>
                    <span> &copy; </span>
                    <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a>

                    .
                    <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a>

                    .
                    <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a>

                    .
                    <a href="https://github.com/muaz-khan/getScreenId/issues?state=open" target="_blank">Latest issues</a>

                    .
                    <a href="https://github.com/muaz-khan/getScreenId/commits/master" target="_blank">What's New?</a>
                </p>
            </header>

            <div class="github-stargazers"></div>

            <blockquote>
              YouTube video: <a href="https://www.youtube.com/watch?v=UHrsfe9RYAQ" target="_blank">https://www.youtube.com/watch?v=UHrsfe9RYAQ</a>
            </blockquote>

            <section class="experiment" style="text-align:center;">
				<div id="chrome-extension-status"></div>
                <br><button id="capture-screen">Capture Your Own Screen</button><hr>
                <video controls autoplay playsinline style="width: 100%;background-repeat: no-repeat;background-size: 100%;background-image: url(https://lh5.googleusercontent.com/6U-gmL_hG9bbquDZdW_ajiA-1bgkfSlHOkzR24aigkyPQzXWXNoRNfyLjXS3rqV92iwq395JSQ=s640-h400-e365-rw);"></video>
            </section>

            <script>
				var maxTries = 0;
				function showChromeExtensionStatus() {
					if(typeof window.getChromeExtensionStatus !== 'function') return;
					
					var gotResponse;
					window.getChromeExtensionStatus(function(status) {
						gotResponse = true;
						document.getElementById('chrome-extension-status').innerHTML = 'Chrome extension status is: <b>' + status + '</b>';
						console.info('getChromeExtensionStatus', status);
					});
					
					maxTries++;
					if(maxTries > 15) return;
					setTimeout(function() {
						if(!gotResponse) showChromeExtensionStatus();
					}, 1000);
				}
				
				showChromeExtensionStatus();
				
                // via: https://bugs.chromium.org/p/chromium/issues/detail?id=487935#c17
                // you can capture screen on Android Chrome >= 55 with flag: "Experimental ScreenCapture android"
                window.IsAndroidChrome = false;
                try {
                    if (navigator.userAgent.toLowerCase().indexOf("android") > -1 && /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor)) {
                        window.IsAndroidChrome = true;
                    }
                } catch (e) {}

                document.getElementById('capture-screen').onclick = function() {
                    document.getElementById('capture-screen').disabled = true;

                    setTimeout(function() {
                      if(document.getElementById('capture-screen').disabled && !document.querySelector('video').src) {
                        document.getElementById('capture-screen').disabled = false;
                      }
                    }, 5000);

                    // edge 17 or higher
                    if(navigator.userAgent.indexOf('Edge') !== -1 && (!!navigator.msSaveOrOpenBlob || !!navigator.msSaveBlob)) {
                        navigator.getDisplayMedia(screen_constraints).then(stream => {
                            document.querySelector('video').srcObject = stream;
                         }, error => {
                           alert('Please make sure to use Edge 17 or higher.');
                         });
                         return;
                    }

                    getScreenId(function(error, sourceId, screen_constraints) {
                        // error    == null || 'permission-denied' || 'not-installed' || 'installed-disabled' || 'not-chrome'
                        // sourceId == null || 'string' || 'firefox'
                        // getUserMedia(screen_constraints, onSuccess, onFailure);

                        document.getElementById('capture-screen').disabled = false;

                        if (IsAndroidChrome) {
                            screen_constraints = {
                                mandatory: {
                                    chromeMediaSource: 'screen'
                                },
                                optional: []
                            };
                            
                            screen_constraints = {
                                video: screen_constraints
                            };

                            error = null;
                        }

                        if(error == 'not-installed') {
                          alert('Please install Chrome extension. See the link below.');
                          return;
                        }

                        if(error == 'installed-disabled') {
                          alert('Please install or enable Chrome extension. Please check "chrome://extensions" page.');
                          return;
                        }

                        if(error == 'permission-denied') {
                          alert('Please make sure you are using HTTPs. Because HTTPs is required.');
                          return;
                        }

                        console.info('getScreenId callback \n(error, sourceId, screen_constraints) =>\n', error, sourceId, screen_constraints);

                        document.getElementById('capture-screen').disabled = true;
                        navigator.mediaDevices.getUserMedia(screen_constraints).then(function(stream) {
                            // share this "MediaStream" object using RTCPeerConnection API

                            document.querySelector('video').srcObject = stream;

                            stream.oninactive = stream.onended = function() {
                                document.querySelector('video').src = null;
                                document.getElementById('capture-screen').disabled = false;
                            };

                            document.getElementById('capture-screen').disabled = false;
                        }).catch(function(error) {
                            console.error('getScreenId error', error);

                            alert('Failed to capture your screen. Please check Chrome console logs for further information.');
                        });
                    }/*, ['screen', 'audio']*/);
                };
            </script>

            <blockquote class="inline">
                <ol>
                  <li>
                    Install this: <a href="https://chrome.google.com/webstore/detail/screen-capturing/ajhifddimkapgcifgcodmmfdlknahffk" target="_blank">https://chrome.google.com/webstore/detail/screen-capturing/ajhifddimkapgcifgcodmmfdlknahffk</a>
                  </li>

                  <li>
                    Now use below codes on any HTTPs domain.
                  </li>

                  <li>
                    Remember, HTTPs is required.
                  </li>

                  <li>
                    getScreenId gives you "MediaStream" object; you can share that object with other users using AppRTC demo, SimpleWebRTC or EasyRTC or PeerJs libraries, or any standalone peer-to-peer demo.
                  </li>

                  <li>
                    In simple words, you have to use RTCPeerConnection API along with getScreenId to share screen with other users.
                  </li>
                </ol>
            </blockquote>

            <section class="experiment">
                <h2 class="header specific-h2">Prerequisites</h2>
                <ol>
                    <li>
                        Chrome?
                        <a href="https://chrome.google.com/webstore/detail/screen-capturing/ajhifddimkapgcifgcodmmfdlknahffk" target="_blank">Store</a>
                        / <a href="https://github.com/muaz-khan/Chrome-Extensions/tree/master/desktopCapture">Source Code</a>
                    </li>

                    <li>
                        Firefox? Requires version 52 or higher; and HTTPs.
                    </li>

                    <li>
                        MS-Edge requires 17 or higher; and HTTPs.
                    </li>
                </ol>
            </section>

            <section class="experiment">
              <h2 class="header specific-h2">
                  How to use <a href="https://github.com/muaz-khan/getScreenId" target="_blank">getScreenId.js</a>?</h2>

                <pre class="sh_javascript sh_html">
&lt;script src="https://cdn.WebRTC-Experiment.com/getScreenId.js"&gt;&lt;/script&gt;
&lt;script src="https://webrtc.github.io/adapter/adapter-latest.js"&gt;&lt;/script&gt;
&lt;script&gt;
getScreenId(function (error, sourceId, screen_constraints) {
    // error    == null || 'permission-denied' || 'not-installed' || 'installed-disabled' || 'not-chrome'
    // sourceId == null || 'string' || 'firefox'

    if(navigator.userAgent.indexOf('Edge') !== -1 && (!!navigator.msSaveOrOpenBlob || !!navigator.msSaveBlob)) {
        navigator.getDisplayMedia(screen_constraints).then(stream => {
            document.querySelector('video').srcObject = stream;
        }, error => {
            alert('Please make sure to use Edge 17 or higher.');
        });
        return;
    }

    navigator.mediaDevices.getUserMedia(screen_constraints).then(function (stream) {
        document.querySelector('video').srcObject = stream;

        // share this "MediaStream" object using RTCPeerConnection API
    }).catch(function (error) {
        console.error(error);
    });
});
&lt;/script&gt;
</pre>

            </section>
			
			<section class="experiment">
              <h2 class="header specific-h2">
                  How to detect whether extension is installed or not?
			   </h2>

                <pre class="sh_javascript sh_html">
&lt;script src="https://cdn.WebRTC-Experiment.com/getScreenId.js"&gt;&lt;/script&gt;
&lt;script&gt;
getChromeExtensionStatus(function(status) {
    if (status === 'installed-enabled') alert('installed');
    if (status === 'installed-disabled') alert('installed but disabled');
    // etc.
});
&lt;/script&gt;
</pre>

            </section>

            <section class="experiment">
                <h2 class="header" id="feedback">Feedback</h2>
                <div>
                    <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
                </div>
                <button id="send-message" style="font-size: 1em;">Send Message</button><small style="margin-left: 1em;">Enter your email too; if you want "direct" reply!</small>
            </section>

            <section class="experiment own-widgets latest-commits">
                <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">Latest Updates</a></h2>
                <div id="github-commits"></div>
            </section>
        </article>

        <a href="https://github.com/muaz-khan/getScreenId" class="fork-left"></a>

        <footer>
            <p>
                <a href="https://www.webrtc-experiment.com/">WebRTC Experiments</a>
                © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
                <a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
            </p>
        </footer>

        <!-- commits.js is useless for you! -->
        <script>
            window.useThisGithubPath = 'muaz-khan/getScreenId';
        </script>
        <script src="https://cdn.webrtc-experiment.com/commits.js" async> </script>

        <script src="https://cdn.webrtc-experiment.com/syntax/sh_main.min.js" type="text/javascript"> </script>
        <script src="https://cdn.webrtc-experiment.com/syntax/sh_javascript.min.js" type="text/javascript"> </script>
        <script src="https://cdn.webrtc-experiment.com/syntax/sh_html.min.js" type="text/javascript"> </script>
        <link href="https://cdn.webrtc-experiment.com/syntax/sh_style.css" type="text/css" rel="stylesheet">

        <script>
          sh_highlightDocument();
        </script>
    </body>
</html>
